<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1，computed 和watch 如果都能够完成某个功能，优先选择computed
         2，如果在程序当中采用异步的方式，只能使用watch
         3，什么时候使用箭头函数？什么时候使用普通函数？
              看看这个函数是否属于Vue管理的
              是Vue管理的函数：统一写普通函数
              不是Vue管理的函数：统一写箭头函数 -->
    <div id="app">
        <h1>{{msg}}</h1>
        数字1 ： <input type="text" v-model="num1"><br>
        数字1 ： <input type="text" v-model="num2"><br>
        比较大小 ： {{temp}}

    </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '比较大小案例',
                num1: 0,
                num2: 0,

            },
            computed: {
                //计算属性简写方式
                temp() {
                    let res = this.num1 - this.num2

                    if (res == 0) {
                        return this.num1 + '=' + this.num2
                    } else if (res > 0) {
                        return this.num1 + '>' + this.num2
                    } else {
                        return this.num1 + '<' + this.num2
                    }
                }
            }
        })
    </script>
</body>

</html>